<template>
  <section class="contianer">
    <el-row
      type="flex"
      justify="space-between"
    >
      <!-- 顶部过滤列表 -->
      <div class="flights-content">
        <!-- 过滤条件 -->
        <FlightsFilters
          v-if="flightsData.options"
          :data='flightsData'
          @setFilteredList='newList'
        ></FlightsFilters>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageIndex"
          :page-sizes="[5, 10, 15, 25]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="filteredList.length"
        >
        </el-pagination>

        <!-- 航班头部布局 -->
        <FlightsListHead />

        <!-- 航班信息 -->
        <div class="list">
          <FlightsItem
            v-for="flight in dataList"
            :key="flight.id"
            :data="flight"
          />
        </div>

        <!-- 分页组件 -->

      </div>

      <!-- 侧边栏 -->
      <FlightsAside></FlightsAside>
    </el-row>
  </section>
</template>

<script>
import { airs } from "@/api/air";
import FlightsAside from "@/components/air/FlightsAside";
import FlightsListHead from "@/components/air/FlightsListHead";
import FlightsItem from "@/components/air/FlightsItem";
import FlightsFilters from "@/components/air/FlightsFilters";
export default {
  components: {
    FlightsListHead,
    FlightsItem,
    FlightsFilters,
    FlightsAside
  },
  data() {
    return {
      flightsData: {},
      filteredList: [],
      pageIndex: 1,
      pageSize: 5,
    };
  },
  watch: {
    $route(){
      this.pageIndex=1
      this.init()
    }
  },
  async created() {
    this.init()
  },
  methods: {
    async init(){
      let res = await airs(this.$route.query);
    this.flightsData = res.data;
    this.filteredList = [...this.flightsData.flights];
      console.log(this.filteredList);
    },
    handleSizeChange(val) {
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.pageIndex = val;
    },
    newList(arr) {
      this.filteredList = arr;
    },
  },
  computed: {
    dataList() {
      if (!this.filteredList) {
        return [];
      }
      const end = this.pageIndex * this.pageSize;
      const begin = end - this.pageSize;
      return this.filteredList.slice(begin, end);
    },
  },
};
</script>

<style scoped lang="less">
.contianer {
  width: 1000px;
  margin: 20px auto;
}

.flights-content {
  width: 745px;
  font-size: 14px;
}

.aside {
  width: 240px;
}
</style>
